<template>
  <div>
    <h1>角色</h1>
    <table>
      <tr>
        <td>角色名称</td>
        <td>操作一</td>
        <td>操作二</td>
        <td>操作三</td>
      </tr>
      <tr>
        <td>
          <select name="" v-model="con" @change="getrole1">
            <option :value="i.id" v-for="i in data" :key="i.id">
              {{ i.name }}
            </option>
          </select>
        </td>
        <td>
          <select name="" v-model="con1" @change="getresource2">
            <option :value="e.id" v-for="e in data1" :key="e.id">
              {{ e.name }}
            </option>
          </select>
        </td>
        <td>
          <select name="" v-model="con2">
            <option :value="j.id" v-for="j in data2" :key="j.id">
              {{ j.name }}
            </option>
          </select>
        </td>
        <td><button @click="add">添加</button></td>
      </tr>
    </table>
    <table>
      <tr>
        <td>已经有的权限</td>
        <td>操作</td>
      </tr>
      <tr v-for="i in data3" :key="i.id">
        <td>{{ i.name }}</td>
        <td><button @click="dele(i.id)">删除</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "jiaose",
  data() {
    return {
      data: "",
      data1: "",
      data2: "",
      con1: "" /*一级资源id*/,
      con: "" /*角色id*/,
      con2: "" /*二级资源id*/,
      data3: "",
    };
  },
  methods: {
    getrole() {
      axios({ url: "/getallrole", method: "get" }).then((res) => {
        this.data = res.data.list;
      });
    },
    getresource1() {
      axios({ url: "/getallresource", method: "get" }).then((res) => {
        console.log(res);
        this.data1 = res.data.list;
      });
    },
    getresource2() {
      axios({
        url: "/getallresource2",
        method: "get",
        params: { id: this.con1 },
      }).then((res) => {
        console.log(res);
        this.data2 = res.data.list;
      });
    },
    getrole1() {
      axios({
        url: "/getroleyiyou",
        method: "get",
        params: { roleid: this.con },
      }).then((res) => {
        console.log(res);
        this.data3 = res.data.list;
      });
    },
    add() {
      axios({
        url: "/jiaogetz",
        method: "post",
        data: {
          roleid: this.con,
          resourceid1: this.con1,
          resourceid2: this.con2,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    dele(id) {
      axios({
        url: "/delroleres",
        method: "post",
        data: { id: id, roleid: this.con },
      }).then((res) => {
        console.log(res);
      });
    },

  },
  mounted() {
    this.getrole();
    this.getresource1();
  },
};
</script>

<style scoped></style>
